<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.screen{
				position: relative;
				width: 800px;
				height: 600px;
				perspective: 800px;
			}
			.wrapper{
				position: absolute;
				left: 0;
				top: 0;
				width: 20px;
				height: 100%;
				background-color: #79c;
				transition: 1s;
				overflow: hidden;
			}
			.screen:hover .wrapper{
				animation: ani .5s linear;
			}
			@keyframes ani{
				0{transform: rotateY(0);}
				50%{transform: rotateY(90deg);}
				51%{transform: rotateY(-90deg);}
				100%{transform: rotateY(0);}
			}
			.wrapper img{
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div class="screen"></div>
	</body>
	<script type="text/javascript">
		;(function (w,e) {
			function Demo (option) {
				Object.assign(this,{
					xWidth: 10,
					yWidth: 600
				},option)
				this.init()
			}
			Demo.prototype = {
				init(){
					let container
					try{
						container = e.querySelector(this.el)
					}catch(err){console.warn(err)}
					if(!container){
						console.warn("needs a useful string for option el")
						return
					}
					let mainWidth = container.offsetWidth
					let mainHeight = container.offsetHeight
					let xWidth = this.xWidth
					let yWidth = this.yWidth
					let nX = mainWidth / xWidth
					let nY = mainHeight / yWidth
					for(let i = 0; i < nY; i++){
						for(let j = 0; j < nX; j++){
							let w = e.createElement("div")
							w.className = "wrapper"
							w.style.width = xWidth + "px"
							w.style.height = yWidth + "px"
							w.style.left = xWidth * j + "px"
							w.style.top = yWidth * i + "px"
							w.style.transitionDelay = (this.randomDelay ? Math.random() / 2 : (i+j) * .02) + "s"
							w.style.animationDelay = (this.randomDelay ? Math.random() / 2 : (i+j) * .04) + "s"
							container.appendChild(w)
							let img = e.createElement("img")
							img.src = this.imgSrc
							img.style.left = -xWidth * j + "px"
							img.style.top = -yWidth * i + "px"
							w.appendChild(img)
						}
					}
				}
			}
			w.Demo = Demo
		})(window,document)
		new Demo({
			el: ".screen",
			imgSrc: "./bg.jpg",
			randomDelay: true,
			xWidth: 80,
			yWidth: 60
		})
	</script>
</html>